Sử dụng javascript lập trình Pig Roll
4.180 lượt xem;
- PigGame.html
- project /
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>The Game of Pig</title>
6 <link type="text/css" rel="stylesheet" href="Styles/Style.css" />
7 <script src='https://kit.fontawesome.com/a076d05399.js'></script>
8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
9 </head>
10 <body>
11 <div class="container">
12 <!--<h1>The Game of Pig</h1>-->
13 <table>
14 <tr>
15 <th><div id="Player1">Player 1 <i id="P1active" class="fa fa-circle" style="display:none;font-size:18px;color:red"></i></div></th>
16 <th></th>
17 <th><div id="Player2">Player 2 <i id="P2active" class="fa fa-circle" style="display:none;font-size:18px;color:red"></i></div></th>
18 </tr>
19 <tr>
20 <td><div id="Score1" class="score">0</div></td>
21 <td><div id="message" style="font-size:18px;color:red" ></div></td>
22 <td><div id="Score2" class="score">0</div></td>
23 </tr>
24
25 <tr>
26 <td><i id="P1trophy" class="fa fa-trophy" style="display:none;font-size:80px;color:goldenrod"></i></td>
27 <td><button id="btnRoll"><i class='fas fa-dice' title="Roll the Dice." style='font-size:48px;color:darkgreen'></i></button></td>
28 <td><i id="P2trophy" class="fa fa-trophy" style="display:none;font-size:80px;color:goldenrod"></i></td>
29 </tr>
30 <tr>
31 <td>
32 <i id="awsDice1" class='fas fa-dice-two' style='display:none;font-size:100px;color:red'></i>
33 </td>
34 <td>
35 <button id="btnPass"><i class="fa fa-exchange" title="Lock the score and pass chance." style="font-size:48px;color:darkgreen"></i></button>
36 </td>
37 <td>
38 <i id="awsDice2" class='fas fa-dice-two' style='display:none;font-size:100px;color:red'></i>
39 </td>
40 </tr>
41 <tr>
42 <td>
43 <div class="turnTotal">
44 <div class="turnTotal-label">Turn Total</div>
45 <div class="turnTotal-score" id="turnTotal1">0</div>
46 </div>
47 </td>
48 <td>
49 <button id="btnReset"><i class="fa fa-refresh" title="Restart the game." style="font-size: 48px;color: darkgreen"></i></button>
50 </td>
51 <td>
52 <div class="turnTotal">
53 <div class="turnTotal-label">Turn Total</div>
54 <div class="turnTotal-score" id="turnTotal2">0</div>
55 </div>
56 </td>
57 </tr>
58
59
60 </table>
61 </div>
62
63
64 <script type="text/javascript" src="Scripts/Controllers.js"></script>
65 <script type="text/javascript" src="Scripts/PigGame.js"></script>
66 </body>
67 </html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>The Game of Pig</title>
6 <link type="text/css" rel="stylesheet" href="Styles/Style.css" />
7 <script src='https://kit.fontawesome.com/a076d05399.js'></script>
8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
9 </head>
10 <body>
11 <div class="container">
12 <!--<h1>The Game of Pig</h1>-->
13 <table>
14 <tr>
15 <th><div id="Player1">Player 1 <i id="P1active" class="fa fa-circle" style="display:none;font-size:18px;color:red"></i></div></th>
16 <th></th>
17 <th><div id="Player2">Player 2 <i id="P2active" class="fa fa-circle" style="display:none;font-size:18px;color:red"></i></div></th>
18 </tr>
19 <tr>
20 <td><div id="Score1" class="score">0</div></td>
21 <td><div id="message" style="font-size:18px;color:red" ></div></td>
22 <td><div id="Score2" class="score">0</div></td>
23 </tr>
24
25 <tr>
26 <td><i id="P1trophy" class="fa fa-trophy" style="display:none;font-size:80px;color:goldenrod"></i></td>
27 <td><button id="btnRoll"><i class='fas fa-dice' title="Roll the Dice." style='font-size:48px;color:darkgreen'></i></button></td>
28 <td><i id="P2trophy" class="fa fa-trophy" style="display:none;font-size:80px;color:goldenrod"></i></td>
29 </tr>
30 <tr>
31 <td>
32 <i id="awsDice1" class='fas fa-dice-two' style='display:none;font-size:100px;color:red'></i>
33 </td>
34 <td>
35 <button id="btnPass"><i class="fa fa-exchange" title="Lock the score and pass chance." style="font-size:48px;color:darkgreen"></i></button>
36 </td>
37 <td>
38 <i id="awsDice2" class='fas fa-dice-two' style='display:none;font-size:100px;color:red'></i>
39 </td>
40 </tr>
41 <tr>
42 <td>
43 <div class="turnTotal">
44 <div class="turnTotal-label">Turn Total</div>
45 <div class="turnTotal-score" id="turnTotal1">0</div>
46 </div>
47 </td>
48 <td>
49 <button id="btnReset"><i class="fa fa-refresh" title="Restart the game." style="font-size: 48px;color: darkgreen"></i></button>
50 </td>
51 <td>
52 <div class="turnTotal">
53 <div class="turnTotal-label">Turn Total</div>
54 <div class="turnTotal-score" id="turnTotal2">0</div>
55 </div>
56 </td>
57 </tr>
58
59
60 </table>
61 </div>
62
63
64 <script type="text/javascript" src="Scripts/Controllers.js"></script>
65 <script type="text/javascript" src="Scripts/PigGame.js"></script>
66 </body>
67 </html>